<template>
  <div>
    <div
      class="flex-container"
      :class="[{
        'tree-fold':treeFold
      }]"
    >
      <div class="left-container">
        <custom-tree
          v-loading="treeLoading"
          :loaded="!treeLoading"
          :data="treeData"
          :tree-info="treeInfo"
          :btns="treeBtns"
          :stick-disabled="false"
          :tree-fold.sync="treeFold"
          show-fold
          @node-click="handleNodeClick"
          @node-select="handleNodeClick"
        />
      </div>
      <div class="right-container">
        <page-banner v-if="showBanner && bannerPosition==='top'" ref="pageBanner" :banner-setting="bannerSetting" />
        <table-filter
          ref="tableFilter"
          is-in-template
          :query="filter"
          :query-rows="queryRows"
          :enable-full-search="fullTextSearch"
          :search-type.sync="searchType"
          :search-text.sync="searchText"
          :grid-info="gridInfo"
          @search="handleSearch"
          @reset="handleSearch"
        />
        <div class="filter-wraper">
          <table-operate is-in-template :btns="toolbarBtns" :show-back="showBack">
            <template v-if="showBack" #back="{size}">
              <span class="btn-wraper">
                <el-button type="primary" :size="size" icon="el-icon-back" @click="goBack">返回</el-button>
              </span>
            </template>
          </table-operate>
        </div>
        <lb-table
          v-loading="listLoading"
          v-bind="tableAttr"
          :column="tableColumn"
          :data="tableData"
          :table-info="tableInfo"
          :grid-info="gridInfo"
          :personalization="personalization"
          :btns="tableBtns"
          :pagination="enablePaging"
          background
          border
          is-template
          fixed-heigth
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="pageSizes"
          :current-page.sync="currentPage"
          :total="total"
          :page-size="pageSize"
          :default-sort="defaultSort"
          @size-change="handleSizeChange"
          @p-current-change="handleCurrentChange"
          @sort-change="handleSortChange"
        />
        <page-banner v-if="showBanner && bannerPosition==='bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
      </div>
    </div>
  </div>
</template>

<script>
import main from './mixins/main'
import tree from './mixins/tree'
import table from './mixins/table'
import filter from './mixins/filter'
import banner from './mixins/banner'
export default {
  name: 'Tem1111',
  mixins: [main, tree, filter, table, banner],
  data() {
    return {
      treeFold: false
    }
  },
  mounted: function() {
    this.getTreeData().finally(() => {
      this.getList()
    })
  },
  methods: {
    onActivated: function() {
      this.$store.commit('page/SET_CURRENTTREE', this.currentTree)
      this.getList()
    },
    handleNodeClick(data, node) {
      // 只有叶子节点点击后才调用接口
      console.log(node)
      this.$store.commit('page/SET_CURRENTTREE', data)
      this.emitNodeclick({ data, node, leaf: node.isLeaf })
      this.currentTree = data
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-container{
  display: flex;
  &.tree-fold{
    .left-container{
      width: 0 !important;
    }
  }
  .left-container{
    position: relative;
    width: 300px;
    height: 100%;
    .left-side-icon{
      right: -13px;
      z-index: 100;
      font-size: 18px;
      background-color: #a8abb2;
      color: #fff;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .right-container{
    flex: 1;
    margin-left: 20px;
    position: relative;
    min-width: 0;
  }
  ::v-deep .form-operate{
    display: inline-block;
    margin-right: 10px;
  }
}
</style>
